<template>
  <div class="article-category">
    <div class="title">文章类别</div>
    <div class="tag-wrapper">
      <el-tag v-for="(item, index) in articleTypes" :key="index"
              :type="tagTypes[index%tagTypes.length]"
              style="margin-right: 20px;">
        {{item.name}}
      </el-tag>
    </div>

    <div class="title add">添加文章类别</div>
    <el-input placeholder="请输入文章类别" v-model="articleType" clearable></el-input>
    <el-button type="primary" @click="addArticleType">添加</el-button>
  </div>
</template>

<script>
export default {
  name: "ArticleCategory",
  data() {
    return {
      articleTypes: [
        // {
        //   name: 'Javascript',
        //   value: 'Javascript'
        // },
      ],
      tagTypes: ['', 'success', 'info', 'warning', 'danger'],
      articleType: ''
    }
  },
  methods: {
    getArticleTypeList() {
      let token= this.userInfo.token;
      this.$http({
        url: '/admin/getTypeList',
        method: 'get',
        headers: {Authorization: token}
      }).then(response=>{
        let result= response.data;
        if(result.code===200) {
          let data= JSON.parse(result.data);
          this.articleTypes= data.data;
        } else {
          this.$message.warning('获取文章类型失败');
        }
      }).catch(e=>{
        this.$message.warning('获取文章类型失败');
      })
    },
    addArticleType() {
      if(!this.articleType) return;
      let token= this.userInfo.token;
      this.$http({
        url: '/admin/addType',
        method: 'post',
        headers: {Authorization: token},
        data: {
          name: this.articleType,
          value: this.articleType
        }
      }).then(response=>{
        let result= response.data;
        if(result.code===200) {
          this.getArticleTypeList();
        } else {
          this.$message.warning('添加文章类型失败');
        }
      }).catch(e=>{
        this.$message.warning('添加文章类型失败');
      })
    }
  },
  mounted() {
    let userInfo= window.sessionStorage.getItem('userInfo');
    this.userInfo= JSON.parse(userInfo);
    this.getArticleTypeList();
  }
}
</script>

<style scoped lang="less">
  .article-category {
    .title {
      box-sizing: border-box;
      width: 100%;
      height: 50px;
      line-height: 40px;
      padding: 5px 10px;
      font-size: 24px;
      color: #fff;
      border-radius: 4px;
      background: #007BFF;
      margin-bottom: 20px;
      &.add {
        margin-top: 60px;
        background: #D3BF93;
      }
    }
    .el-input {
      width: 50%;
    }
  }
</style>
